import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Card, DatePicker } from 'antd';
import React, { useState } from 'react';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const Search = ({onSearch}) => {
  const [range, setRange] = useState([])
  return (
    <Card
      title="添加筛选条件"
      bordered={false}>
      <Form
        layout="vertical"
        style={{
          marginTop: 8,
        }}
      >
        <FormItem
          label="日期">
          <RangePicker
            value={range}
            onChange={setRange}
            style={{
              width: '100%',
            }}
            placeholder={['开始日期', '结束日期']}
          />
        </FormItem>
        <FormItem
          style={{
            marginTop: 32,
          }}
        >
          <Button type="primary" onClick={() => onSearch(range)}>
            查询
          </Button>
        </FormItem>
      </Form>
    </Card>
  );
}

export default Search;
